<template>
  <div class="dashboard-container">
    <div
      id="mapChart"
      class="mapContent"
    />

  </div>
</template>

<script>
import 'echarts/map/js/china.js'
import axios from 'axios'
let chinaMapId = null
export default {
  name: 'Dashboard',
  data() {
    return {
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      axios
        .get('dev-api/news/wap/fymap2020_data.d.json')
        .then(response => {
          this.mapFn(response.data.data.list)
        })
    },
    mapFn(myDate) {
      chinaMapId = this.$echarts.init(document.getElementById('mapChart'))
      const option = {
        title: {
          x: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        visualMap: {
          show: true,
          x: 'left',
          y: 'bottom',
          splitList: [
            { start: 1500 },
            { start: 700, end: 1500 },
            { end: 700 }
          ],
          color: ['#67C23A', '#F56C6C', '#909399']
        },
        series: [
          {
            name: '新冠',
            type: 'map',
            mapType: 'china',
            roam: false,
            zoom: 1.2,
            layoutCenter: ['50%', '50%', '50%', '50%'],
            layoutSize: '100%',
            label: {
              normal: {
                show: false
              },
              itemStyle: {
                normal: {
                  borderColor: '#20A7D0',
                  borderWidth: 1
                }
              }
            },
            data: myDate
          }
        ]
      }
      chinaMapId.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 100%;
  padding: 20px;
  .mapContent{
    width: 100%;
    height: calc(100vh - 124px);
  }
}
</style>
